<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-14 17:05:18
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-05 16:36:08
 * @FilePath: \hy-ui\src\views\taskMassage\components\task\components\screen.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="screen">
    <el-popover
      placement="bottom-end"
      width="280"
      trigger="click"
      ref="screen"
      @show="show"
    >
      <el-button slot="reference" type="text"
        >{{ title }}筛选<i
          class="el-icon-arrow-down"
          style="color: #409eff; font-size: 16px; margin-left: 5px"
        ></i
      ></el-button>
      <div v-if="listCopy.length">
        <el-input
          v-model="value"
          placeholder="请输入后搜索"
          @input="handleFilter"
        ></el-input>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 14px;
            padding: 0 6px;
          "
        >
          <span>全选</span>
          <el-checkbox
            v-model="chooseAll"
            @change="handleChooseAll"
          ></el-checkbox>
        </div>
        <div style="min-height: 300px; max-height: 400px; overflow: auto">
          <div
            v-for="(item, i) in listCopy"
            :key="i"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-right: 6px;
              margin-top: 12px;
              cursor: pointer;
            "
          >
            <span
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <img
                :src="item.avatar"
                v-if="type === '7' && item.avatar"
                alt=""
                style="
                  width: 35px;
                  height: 35px;
                  border-radius: 50%;
                  margin-right: 8px;
                "
              />
              <span
                v-if="type === '7' && !item.avatar"
                style="
                  width: 35px;
                  height: 35px;
                  border-radius: 50%;
                  margin-right: 8px;
                  display: inline-block;
                  background: #1890ff;
                  color: #fff;
                  line-height: 35px;
                  text-align: center;
                  font-size: 16px;
                "
                >{{ item.nickName[0] }}</span
              >
              <span style="font-size: 14px; color: #777">{{
                foramtKey(item)
              }}</span>
            </span>
            <el-checkbox
              v-model="item.choose"
              @change="(val) => handleCheckboxItem(val, item)"
            ></el-checkbox>
          </div>
        </div>
        <el-divider></el-divider>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: -16px;
          "
        >
          <el-button size="small" @click="handleReset">重置</el-button>
          <el-button
            type="primary"
            size="small"
            @click="handleScreenSubmit(chooseList, isPeopleMore)"
            >确认</el-button
          >
        </div>
      </div>
      <el-empty description="暂无数据" v-else></el-empty>
    </el-popover>
  </div>
</template>

<script>
import { listUser } from "@/api/system/user.js";
import { getProject, getTagList, getStartDateList } from "@/api/task/task.js";
const keyMapping = {
  9: "time",
  6: "tag",
  5: "title",
};
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    handleScreenSubmit: {
      type: Function,
      default: () => {},
    },
    getList: {
      type: Function,
      default: () => {},
    },
    isPeopleMore: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      value: undefined,
      chooseAll: false,
      list: [],
      listCopy: [],
      chooseList: [],
    };
  },
  watch: {
    type: {
      async handler(newName, oldName) {
        if(this.type === "9") return 
        let data = [];
        if (this.type === "5") {
          const res = await getProject();
          data = res.rows;
        } else if (this.type === "6") {
          const res = await getTagList();
          data = res.data;
        } else {
          const res = await listUser({
            pageNum: 1,
            pageSize: 9999,
            status: "0",
            userType: "front_user",
          });
          data = res.rows;
        }
        data.forEach((item) => {
          item.choose = false;
        });
        this.list = data;
        this.listCopy = data;
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    show() {
      this.value = undefined;
      this.listCopy = this.list;
    },
    async getDateList(params) {
      const res = await getStartDateList(params);
      const datelist = [];
      res.data.forEach((item, index) => {
        datelist.push({
          time: item,
          id: index,
          choose: false,
        });
      });
      this.list = datelist;
      this.listCopy = datelist;
    },
    foramtKey(row) {
      if (this.type === "5") {
        // 项目
        return row.title;
      } else if (this.type === "6") {
        // 标签
        return row.tag;
      } else if (this.type === "9") {
        // 时间
        return row.time;
      } else {
        return row.nickName;
      }
    },
    handleFilter(val) {
      if (val !== null || typeof val !== undefined) {
        const filterArr = [];
        this.list.forEach((item) => {
          if (
            item[
              keyMapping[this.type] ? keyMapping[this.type] : "nickName"
            ].includes(val)
          ) {
            filterArr.push(item);
          }
        });
        this.listCopy = filterArr;
      }
    },
    handleChooseAll(val) {
      if (val) {
        this.list.forEach((item) => {
          item.choose = true;
          if (this.isPeopleMore) {
            this.chooseList.push(item.userId);
          } else {
            this.chooseList.push(
              item[keyMapping[this.type] ? keyMapping[this.type] : "nickName"]
            );
          }
        });
      } else {
        this.list.forEach((item) => (item.choose = false));
        this.chooseList = [];
      }
    },
    handleCheckboxItem(val, row) {
      for (let i = 0; i < this.list.length; i++) {
        if (!this.list[i].choose) {
          this.chooseAll = false;
          break;
        }
        if (this.list[i].choose && i === this.list.length - 1) {
          this.chooseAll = true;
        }
      }
      if (this.isPeopleMore) {
        if (this.chooseList.includes(row.userId)) {
          this.chooseList = this.chooseList.filter(
            (item) => item !== row.userId
          );
        } else {
          this.chooseList.push(row.userId);
        }
      } else {
        if (this.chooseList.includes(row[keyMapping[this.type] ? keyMapping[this.type] : "nickName"])) {
          this.chooseList = this.chooseList.filter(
            (item) =>
              item !==
              row[keyMapping[this.type] ? keyMapping[this.type] : "nickName"]
          );
        } else {
          this.chooseList.push(
            row[keyMapping[this.type] ? keyMapping[this.type] : "nickName"]
          );
        }
      }
    },
    handleCancel() {
      this.$refs.screen.doClose();
    },
    handleReset() {
      this.chooseAll = false;
      this.handleChooseAll(false);
      this.handleScreenSubmit([], this.isPeopleMore);
      this.handleCancel();
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.screen {
}
</style>